<template>
  <div class="addr-edit-win">
    <!-- 修改目标地址 -->
    <el-dialog
      class="edit-target"
      title="修改目标地址"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="400px"
      :before-close="onOk"
      @close="value=''"
    >
      <el-form ref="form" label-width="80px" size="mini">
        <el-form-item label="原名称">
          <div>{{oldAddr || '空地址'}}</div>
        </el-form-item>
        <el-form-item label="新名称">
          <el-input v-model="value" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item style="margin-top: 100px">
          <el-button @click="onOk()">取 消</el-button>
          <el-button type="primary" @click="confirm()">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    onOk: Function,
    confirmSubmit: Function,
    oldAddr: String,
    onNewAddrChange: Function,
  },
  data() {
    return {
      value: "",
    };
  },
  methods: {
    confirm() {
      if (this.value) {
        this.confirmSubmit(this.value, this.oldAddr);
        this.onOk()
      }
    },
    onClose() {
      // this.formData = {
      //   oldAddr: "",
      //   newAddr: "",
      // };
    },
  },
  mounted() {},
};
</script>

<style>
.edit-target .el-dialog__title {
  font-size: 14px;
  font-weight: 600;
}
.edit-target .el-dialog__header {
  border-bottom: #ececec 1px solid;
  padding: 10px 20px;
}

.edit-target .el-dialog__body {
  padding: 20px;
}
</style>
